<template>
  <div>
    <h2 ref="title">{{ msg }}</h2>
    <button @click="msg = '数据被改变了'">点我改变标题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100,
      msg: '这是页面中的数据',
      timer: null
    }
  },
  methods: {
    fn() {
      console.log('准备好了的吧')
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  name: '',
  beforeCreate() {
    // 此时实例还没有准备好数据
    console.log(this.num)
  },
  created() {
    // 此时实例的数据已经准备好了
    console.log(this.num)
    this.fn()
    // 此时页面还米有准备好
    console.log(this.$refs.title)
  },
  beforeMount() {
    // 还是没有页面的东西
    console.log(this.$refs.title, 123)
  },
  mounted() {
    // 页面准备好了
    console.log(this.$refs.title)
    this.timer = setInterval(() => {
      console.log('定时器在执行')
    }, 1000)
  },
  beforeUpdate() {
    console.log(this.$refs.title.innerHTML)
  },
  updated() {
    console.log(this.$refs.title.innerHTML)
  },
  beforeDestroy() {
    console.log('在销毁之前')
  },
  destroyed() {
    console.log('销毁之后了')
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped></style>
